import React, { Component } from "react";
import "./index.scss";
import { List, AutoSizer } from "react-virtualized";
import { getCityListUtil } from "../../utils/getData";
import { TITLE_HEIGHT, NAME_HEIGHT } from "../../utils/const";
import MyBombBox from "../MyBombbox";
class MyLongList extends Component {
  state = {
    cityList: {},
    cityIndex: [],
    activeIndex: 0,
    isLoading: false,
    bosMsg: "Hi",
  };

  // 渲染每一行
  rowRenderer = ({
    key, // key值
    index, // 索引号
    isScrolling, // 是不是正在滚动中  可以加一些滚动中的提示效果
    isVisible, // 当前项在List中是可见的
    style, // 一定要给每一行数据去添加该样式
  }) => {
    const { cityIndex, cityList } = this.state;
    const initialLetter = cityIndex.map((one) => {
      if (one === "cur") {
        return "当前城市";
      } else if (one === "hot") {
        return "热门城市";
      } else {
        return one.toUpperCase();
      }
    });
    const title = initialLetter[index];

    let data = [];
    for (let i in cityList[cityIndex[index]]) {
      data = [...data, cityList[cityIndex[index]][i]];
    }

    return (
      <div key={key} style={style} className="city">
        <div className="title">{title}</div>
        {data.map((one) => {
          return (
            <div
              className="name"
              key={one.value}
              onClick={() => {
                this.props.changCityMsg(one);
              }}
            >
              {one.label}
            </div>
          );
        })}
      </div>
    );
  };
  // 获取城市数据
  getCityList = async () => {
    await getCityListUtil(this.props.curCity).then((result) => {
      const { cityList, cityIndex } = result;

      this.setState({ cityList, cityIndex });
      this.cityListRef.measureAllRows();
    });
  };

  // 计算每个地域的高度
  getRowHeight = ({ index }) => {
    // TITLE_HEIGHT;
    const { cityList, cityIndex } = this.state;
    const height =
      TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT;
    return height;
  };

  // 渲染城市列表
  renderCityIndex = () => {
    const { cityIndex } = this.state;
    const initialLetter = cityIndex.map((one) => {
      if (one === "cur") {
        return "#";
      } else if (one === "hot") {
        return "热";
      } else {
        return one.toUpperCase();
      }
    });

    return initialLetter;
  };
  // 内部回调函数 用来实现滚动左侧屏幕 右侧的索引导航来转化
  onRowsRendered = ({ startIndex }) => {
    const { cityIndex, activeIndex } = this.state;
    // if (cityIndex[startIndex] !== activeIndex) {
    if (startIndex !== activeIndex) {
      // console.log(cityIndex[startIndex], activeIndex);
      let data = "Hi";
      if (cityIndex[startIndex] === "cur") {
        data = "当";
      } else if (cityIndex[startIndex] === "hot") {
        data = "热";
      } else {
        data = cityIndex[startIndex].toUpperCase();
      }
      this.setState({
        activeIndex: startIndex,
        bosMsg: data,
      });
    }
  };

  // 挂载租佃前
  componentDidMount() {
    this.getCityList();
  }
  render() {
    const { cityIndex, bosMsg } = this.state;
    const length = cityIndex.length;

    return (
      <div className="longListWrapper">
        {/* 左侧 */}
        <AutoSizer style={{ height: "100%", width: "100%" }}>
          {({ height, width }) => (
            <List
              scrollToAlignment="start"
              ref={(cur) => (this.cityListRef = cur)}
              onRowsRendered={this.onRowsRendered}
              width={width}
              height={height}
              rowCount={length}
              rowHeight={this.getRowHeight} // 行高
              rowRenderer={this.rowRenderer}
            />
          )}
        </AutoSizer>
        {/* 右侧 */}
        <ul className="city-index">
          {this.renderCityIndex().map((one, index) => {
            return (
              <li
                key={one}
                className="city-index-item"
                onClick={() => {
                  this.cityListRef.scrollToRow(index);
                }}
              >
                <span
                  className={
                    this.state.activeIndex === index ? "index-active" : ""
                  }
                >
                  {one}
                </span>
              </li>
            );
          })}
        </ul>
        {/* 弹框 */}
        <MyBombBox bosMsg={bosMsg}></MyBombBox>
      </div>
    );
  }
}

export default MyLongList;
